<script lang="ts" setup>
import { computed, onMounted, reactive } from 'vue'
import { callLater, copyObjectSameTo, createOID, dateFormatStr, popMessage } from '../../../../common/utils/normalUtils'
import html2canvas from 'html2canvas'
import SummaryBox from './SummaryBox.vue'

const props = defineProps({
    result: {
        type: Object,
        default: function() {
            return {}
        }
    }
})

/**
 * 页面状态
 */
const state = reactive({
    autoId: createOID(),
    isLoading: false,
    print: false,
    computeVOList: [],
    makeCommission: 0,
    name: '',
    orderPayTimeEnd: '',
    orderPayTimeStart: '',
    makeDistributorCommission: 0, //	赚取分销商佣金
    makeSaleCommission: 0 //	赚取直销佣金
})


onMounted(() => {
    copyObjectSameTo(props.result, state)
})

/**
 * 保存图片
 */
const saveHandler = () => {
    state.isLoading = true
    state.print = true
    callLater(() => {
        createImg()
        state.isLoading = false
    }, 2000)
}

const createImg = async () => {
    const cans: any = await html2canvas(document.getElementById(state.autoId)!, { scale: 1 })
    const url = cans.toDataURL('image/png')
    const a = document.createElement('a')
    const event = new MouseEvent('click')
    a.download = `${state.name}(${state.orderPayTimeStart}-${state.orderPayTimeEnd})计算结果`
    a.href = url
    a.dispatchEvent(event)
    state.print = false
}

</script>

<template>
  <v-pop-win title="赚取佣金计算信息"
             :width="850"
             align-center
             :show-footer="false"
             no-padding
             :loading="state.isLoading">
    <div class="result-box">
      <div v-if="state.print" class="back-box">
        <el-scrollbar height="100%">
          <div :id="state.autoId" class="scroll-inner">
            <summary-box :result="state" />
            <div class="table-list">
              <el-table :data="state.computeVOList"
                        style="width:100%;"
                        border>
                <el-table-column prop="memberName"
                                 label="分销商名称"
                                 show-overflow-tooltip
                                 width="150" />
                <el-table-column prop="productName" label="货品标题" />
                <el-table-column prop="number"
                                 label="数量"
                                 show-overflow-tooltip
                                 width="85" />
                <el-table-column prop="point"
                                 label="返点"
                                 show-overflow-tooltip
                                 width="85" />
                <el-table-column prop="makeCommission"
                                 label="赚取佣金"
                                 show-overflow-tooltip
                                 width="85" />
                <el-table-column prop="bossMakeCommission"
                                 label="抽取佣金"
                                 show-overflow-tooltip
                                 width="85" />
              </el-table>
            </div>
          </div>
        </el-scrollbar>
      </div>
      <div class="result-inner">
        <div v-if="!state.print" class="up-box">
          <summary-box :result="state" show-btn @save="saveHandler" />
          <div class="table-list">
            <el-table :data="state.computeVOList"
                      style="width:100%;height:calc(100%  );"
                      border>
              <el-table-column prop="memberName"
                               label="分销商名称"
                               show-overflow-tooltip
                               width="150" />
              <el-table-column prop="productName" label="货品标题" show-overflow-tooltip />
              <el-table-column prop="number"
                               label="数量"
                               show-overflow-tooltip
                               width="85" />
              <el-table-column prop="point"
                               label="返点"
                               show-overflow-tooltip
                               width="85" />
              <el-table-column prop="makeCommission"
                               label="赚取佣金"
                               show-overflow-tooltip
                               width="85" />
              <el-table-column prop="bossMakeCommission"
                               label="抽取佣金"
                               show-overflow-tooltip
                               width="85" />
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </v-pop-win>
</template>


<style scoped lang="scss">

.result-box{
  width:100%;
  height:550px;
  box-sizing: content-box;
  border:1px solid #bfccec;
  border-radius: 5px;
  overflow: hidden;
  position:relative;
  .scroll-inner{
    @include ver-group();
    width:100%;
    padding: 15px;
    box-sizing: border-box;
    flex:none;
    background: #fff;
  }

  .back-box{
    @include abs-group(0,0,0,0);
  }

  .result-inner{
    @include abs-group(15px,15px,15px,15px);
    overflow: hidden;


    .up-box{
      @include abs-group(0,0,0,0);
      @include ver-group();
      background: #fff;
    }

  }


  .table-list{
    flex:auto;
    width:100%;
    height:100%;
    position:relative;
    overflow: hidden;
  }
}

</style>
